import React, {useEffect, useState} from 'react';
import {useNavigate, useLocation } from 'react-router-dom'
import {connect,ConnectedProps} from "react-redux";
import {Menu} from 'antd'
import type { MenuProps } from 'antd';
import {RouterObj} from "@/routers/interface/index";
import {rootRouter} from "@/routers/index";
import {setCurrentRouteKey,setCrumbList} from "@/redux/modules/Menu/action";
import {findParents} from '@/utils/index'
  /*
   * 1.根据本地路由rootRouter,计算左侧菜单，设置menuSelectKey，defaultOpenKeys
   * 2.defaultOpenKeys计算后,menu无法打开默认节点，问题待解决，目前是通过设置openKeys的值触发走onOpenChange使得默认打开节点
   * 3.解决父组件和react-redux同时传参，参数处理
   * */
type MenuItem = Required<MenuProps>["items"][number];
interface ParentProps {
    // 这里定义父组件传递的props
    menuProps: string;
}

const MenuCom: React.FC<MyComponentProps> = ({setCurrentRouteKey,setCrumbList,menuList,menuProps}) => {
    let {collapsed,crumbList} = menuList
    let Location = useLocation()
    let pathname = Location.pathname
    const [menuData, setMenuData] = useState<MenuItem[]>([]);
    const [selectedKeys, setSelectedKeys] = useState<string[]>([pathname]);
    const [defaultOpenKeys, setDefaultOpenKeys] = useState<string[]>([]);
    //初始化获取菜单数据
    const computerMenu = (data:RouterObj[])=>{
        function fnMenu(data:RouterObj[],level:number):any{
            // eslint-disable-next-line array-callback-return
           return data.map((item,index) => {
                if(item.children && item.children.length>0){
                    return  {
                        key:item.meta?.key || level+'_'+index,
                        label: item.meta?.title,
                        title:item.meta?.title,
                        children:item.children && fnMenu(item.children,level+1),
                        level:level+'_'+index,
                    }
                }else{
                    if(item.path !== '/'){
                        return  {
                            key:item.meta?.key || level+'_'+index,
                            label: item.meta?.title,
                            title: item.meta?.title,
                            level:level+'_'+index,
                        }
                    }
                }
            })
        }
        return fnMenu(data,0)
    }
    useEffect(()=>{
        let list= computerMenu(rootRouter)
        let crumbList:any = findParents(list,pathname,[])
        let selectKey:string[] = []
        selectKey.push(pathname)
        setSelectedKeys(selectKey)
        setCurrentRouteKey(pathname)
        setCrumbList(crumbList)
        setMenuData(list)
    },[pathname, setCrumbList, setCurrentRouteKey])

    useEffect(() => {
        if(crumbList.length>0){
            setDefaultOpenKeys([crumbList[0].key])
        }
    }, [crumbList]);


    const navigate = useNavigate();
    const clickMenu:MenuProps["onClick"] = ({ item, key, keyPath, domEvent }) => {
        let crumbList:any = findParents(menuData,key,[])
        setCurrentRouteKey(pathname)
        setCrumbList(crumbList)
        navigate(key)
    }

    return (
        <div>
            <Menu
                defaultOpenKeys={defaultOpenKeys}
                selectedKeys={selectedKeys}
                mode="inline"
                inlineCollapsed={collapsed}
                items={menuData}
                onClick={clickMenu}
                openKeys={defaultOpenKeys}
                onOpenChange={(openKeys) => {
                    setDefaultOpenKeys(openKeys);
                }}
            ></Menu>
        </div>
    );
}

const mapStateToProps = (state:any)=>{
    return {
        menuList:state.menuList
    }
};
const mapDispatchToProps = { setCurrentRouteKey,setCrumbList}
let connector = connect(mapStateToProps,mapDispatchToProps)
type PropsFromRedux = ConnectedProps<typeof connector>;
// 定义组件的全部 props 类型，包括父组件传递的和 connect 传递的
type MyComponentProps = PropsFromRedux & ParentProps;
export default connector(MenuCom);
